const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

let { CleanWebpackPlugin } = require("clean-webpack-plugin");

//提取css代码到一个单独的文件中去
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//commonJS的语法的进行抛出，插件loader， require方式导入
module.exports = {
    //入口文件
    entry: "./src/index.js",

    //开发环境配置
    devServer: {
        port: 3000,
        open: true,//打开
        // proxy:{

        // }
    },
    //配置别名
    resolve: {
        //支持省略后缀
        extensions: [".jsx", ".js"],
        //指定一些要加载的文件夹信息
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    //出口文件
    output: {
        //打包后的文件
        filename: "js/[hash:8].js",
        //打包的输出路径
        path: path.resolve(__dirname, 'dist'),
    },
    //loader
    module: {
        rules: [
            {
                test: /\.css$/i,//配置css结尾的文件
                // 从右到左依次执行，先写css-loader，再写style-loader
                // use:['style-loader','css-loader'],//指定对应处理的loader信息
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, 'css-loader'],//指定对应处理的loader信息
            },
            //配置文件信息
            {
                test: /\.js|jsx$/i,
                exclude: /(node_modules|bower_components)/, // 屏蔽不需要处理的文件（文件夹）（可选）
                loader:"babel-loader"
            }
        ]
    },
    //plugin插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        //每次打包都清除文件信息
        new CleanWebpackPlugin(),

        //编译后文件的输出目录
        new MiniCssExtractPlugin({
            filename: "css/[hash:8].css",
        })
    ],
    //打包模式 -- 开发模式的区别
    mode: "development",
}